<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<link>
<meta charset="UTF-8"/>
<title>客户端</title>
<link rel="stylesheet" th:href="@{../layui/css/layui.css}" media="all" />
<link rel="stylesheet" th:href="@{../layui/css/layui.mobile.css}" media="all" />
<script th:src="@{../jquery.min.js}"></script>
<script th:src="@{../layui/layui.all.js}"></script>
<script th:src="@{../layui/layui.js}"></script>

<style>
    .threed{
        text-align: center;
        color: mediumorchid;
        -webkit-text-stroke: 1px black;
        letter-spacing: 0.04em;
        background-color: white;
        }
</style>

</head>
<body>
    <div class="layui-row">
        <h1  class="threed">WebSocket客户端</h1>
        <div class="layui-col-md8 layui-col-md-offset2" style="margin-top: 20px">
            <h1>客户端</h1>
            <div class="layui-card">
                <div class="layui-card-body">

                    <div class="layui-form-item">
                        <label class="layui-form-label">请输入昵称</label>
                        <div class="layui-input-inline" style="width: 300px">
                            <input id="username" type="text" name="title" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                        </div>
                        <button class="layui-btn"  onclick="connect()">连接</button>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请发送内容</label>
                        <div class="layui-input-inline" style="width: 300px">
                            <input id="writeMsg" type="text" name="title" required  lay-verify="required" placeholder="请输入要发送的内容" autocomplete="off" class="layui-input">
                        </div>
                        <button class="layui-btn"  onclick="sendMsg()">发送</button>
                    </div>

                </div>
            </div>

            <div class="layui-card" style="margin-top: 100px">
                <div class="layui-card-header">
                    <h1>操作详情</h1>
                </div>

                <div id="content" class="layui-card-body">
                    <h3 align="center" style="color: #007DDB;margin-top: 20px;margin-bottom: 20px">这里将显示操作信息</h3>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
var ws = null;
var username = $("#username").val()
function connect(){
	if(username!=null){
	    $("#content").html('');
		if ('WebSocket' in window){
		     ws = new WebSocket("ws://localhost:8086/socketServer/"+$("#username").val());
            //ws = new WebSocket("ws://127.0.0.1:8086/socketServer/"+$("#username").val());
		}    
	    else if ('MozWebSocket' in window){
	        ws = new MozWebSocket("ws://localhost:8086/socketServer/"+$("#username").val());
            //ws = new MozWebSocket("ws://127.0.0.1:8086/socketServer/"+$("#username").val());
	    }
	    else{
	        alert("该浏览器不支持websocket");    
	    }    
	        
	        
	    ws.onmessage = function(evt) {
            var content = $("#content").html();
            $("#content").html(content+'<div style="text-align: right;margin-bottom: 8px">\n' +
                '                        <p><q style="color: mediumorchid">服务端:</q><span>'+evt.data+ '</span></p>\n' +
                '                    </div>\n' +
                '                    <br/>');
	    };    
	        
	    ws.onclose = function(evt) {
            var content = $("#content").html();
            $("#content").html(content+'<div style="margin-bottom: 8px">\n' +
                '                        <p><q style="color: coral">客户端:</q><span>连接中断</span></p>\n' +
                '                    </div>\n' +
                '                    <br/>');
	    };    
	        
	    ws.onopen = function(evt) {
            $("#content").html('<div style="margin-bottom: 8px">\n' +
                '                        <p><q style="color: coral">客户端:</q><span>连接成功...</span></p>\n' +
                '                    </div>\n' +
                '                    <br/>');
	    };  
	}else{
		alert("请输入您的昵称");
	}
}

function sendMsg() {
    ws.send($("#writeMsg").val());
    var content = $("#content").html();
    $("#content").html(content+'<div>\n' +
        '                        <p><q style="color: coral">客户端:</q><span>'+$("#writeMsg").val()+ '</span></p>\n' +
        '                    </div>\n' +
        '                    <br/>');
}    
</script>
</body>
</html>